webpack未能加载打包音频文件

一、说明

在 webpack 中，我们发现，在项目中直接把图片(包括音频)路径拿过来使用是行不通的，要在 require 或者 import 引入之后才能使用这些资源。这是因为 webpack 会把图片当作模块来使用，而不是直接以字符串的形式(模块化是 node 编程的核心理念之一)

二、引入方式

• require:
  • 是 AMD 规范引入方式
  • 因为是在运行时调用，所以理论上可以放在代码的任何地方
  • require 是赋值过程，其实 require 的结果就是对象、数字、字符串、函数等，再把 require 的结果赋值给某个变量
• import
  • 是 ES6 的语法标准，如需兼容浏览器的话必须转化成 ES5 的语法
  • 在编译时调用，所以必须放在文件开头
  • import 是解构过程，但是目前所有的引擎都还没有实现 import，我们在 node 中使用 babel 支持 ES6，也仅仅是将 ES6 转码为 ES5 再执行，import 语法会被转码为 require

三、无法打包 mp3 文件(或其他文件)问题

解决方式(使用 file-loader)

1. 可以直接在 require 时指定使用 file-loader，示例如下const sounds = require("file-loader!../assets/sounds/sounds.mp3");
2. 可以在 webpack 中配置 file-loader，示例如下 { test: /\.mp3$/, use: 'file-loader'}